<template>
<div class="row">
  <vs-modal title="搜索条件" show="{{@ showSettings}}" effect="fade" width="800">
    <div class="modal-body">
      <form class="form-horizontal">
        <div class="form-group">
          <label class="col-sm-2 control-label">房间名</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" v-model="searchOpt.roomName">
          </div>
        </div> 
        <div class="form-group">
          <label class="col-sm-2 control-label">起始时间</label>
          <div class="col-sm-10">
            <vs-datepicker 
              value="{{@ startTime}}"
              width="auto" 
              format="yyyy-MM-dd">
            </vs-datepicker>
          </div>
        </div> 
        <div class="form-group">
          <label class="col-sm-2 control-label">结束时间</label>
          <div class="col-sm-10">
            <vs-datepicker 
              value="{{@ stopTime}}"
              width="auto" 
              format="yyyy-MM-dd">
            </vs-datepicker>
          </div>
        </div>                       
      </form>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" v-on="click: doSearchRecords">搜索</button>
      <button type="button" class="btn btn-default" v-on="click: showSettings = false">退出</button>
    </div>   
  </vs-modal>
  <vs-modal title="下载链接" show="{{@ showDownloadLink}}" effect="fade" width="800">
    <div class="modal-body">
      <div class="my-dl-table">
        <my-table cfg="{{* dlCfg}}" lists={{dlLists}} state="{{dlState}}"></my-table>
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" v-on="click: showDownloadLink = false">退出</button>
    </div>   
  </vs-modal>
  <div class="col-md-12">
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-form pull-right">
          <form class="form-inline">     
            <div class="form-group">
              <label class="control-label">场景过滤</label>
              <input type="text" class="form-control input-sm" v-model="inputedScene" debounce="500">
            </div>
            <button class="btn btn-sm btn-default" v-on="click: showSettings = true">
              <span class="glyphicon glyphicon-search"></span> 搜索
            </button>
          </form>
        </div>
      </div>
    </nav>
    <div class="col-md-12">
      <my-table cfg="{{* cfg}}" lists="{{lists | recordFilter}}" state="{{state}}"></my-table>
    </div>
  </div>
</div>
</template>

<script>
var settings = require('../lib/settings');
var utils = require('../lib/utils');
var log = require('../lib/log');
var mediaServerApi = require('../lib/mediaServerApi');

module.exports = {
  replace: true,
  filters: {
    recordFilter: function(lists) {
      return lists.filter(function(item, index) {
        return this.inputedScene === '' || item.scene.indexOf(this.inputedScene) != -1;
      }, this);
    }
  },  
  data: function() {
    return {
      inputedScene: '',
      showSettings: false,
      showDownloadLink: false,
      header: {
        icon: 'fa fa-list',
        title: '点播列表'
      },
      cfg: {
        isCheckable: false,
        isShowHead: true,
        isShowOperation: true,
        columns: [{
          field: 'roomName',
          text: '房间名',
          width: 'auto'
        }, {
          field: 'scene',
          text: '场景',
          width: 'auto'
        }, {
          field: 'starttimeR',
          text: '开始时间',
          width: 'auto'
        }, {
          field: 'durationR',
          text: '时长',
          width: 'auto'
        }, {
          field: 'sizeR',
          text: '总大小',
          width: 'auto'
        }, {
          field: 'playUrlLink',
          text: '点播',
          width: 'auto'
        }],
        operation: {
          text: '操作',
          width: 'auto',
          actions: [{
            icon: 'fa fa-download',
            doClick: this.doShowDownloadLink
          }]
        }
      },   
      state: {
        listsLoading: false
      },     
      lists: [],
      startTime: '',
      stopTime: '',
      searchOpt: {
        startIndex: 0,
        pageCount: 1024,
        roomName: '',
        starttime: '',
        stoptime: ''
      },
      dlCfg: {
        isCheckable: false,
        isShowHead: true,
        isShowOperation: false,
        columns: [{
          field: '_id',
          text: 'ID',
          width: 'auto'
        }, {
          field: 'downloadLink',
          text: '链接',
          width: 'auto'
        }]
      },
      dlLists: [],
      dlState: {
        listsLoading: true
      }
    }
  },
  methods: {
    doSearchRecords: function() {
      this.searchOpt.starttime = this.startTime + 'T00:00:00';
      this.searchOpt.stoptime = this.stopTime + 'T23:59:59';
      log.DEBUG_TRACE('Search from ' + this.searchOpt.starttime + ' to ' + this.searchOpt.stoptime);
      this.state.listsLoading = true;
      mediaServerApi.record.getItemsWithJsonQuery('records', this.searchOpt, function(res) {
        if (res && res.code == 0) {
          var startIndex = 1;
          var records = res.data.records;
          this.lists.splice(0, this.lists.length);
          _.each(records, function(item, index, list) {
            item._id = startIndex++;
            item.sizeR = utils.readableSize(item.size);
            item.durationR = utils.readableTime(item.duration);
            var starttime = new Date(Date.parse(item.starttime));
            item.starttimeR = starttime.toLocaleString();
            item.playUrlLink = '<a href="tzdb://' + item.playUrl.replace(/rtsp\:\/\/\{ip\}/, settings.hostname) + '" >点播</a>';
            this.lists.splice(this.lists.length, 0, item);
          }, this);

          if (this.lists.length === 0) {
            log.showWarning('搜索到0条记录，请重新选择搜索条件');
          }

          this.state.listsLoading = false;
        } else {
          log.showErrorWithRes(res);
        }
      }.bind(this));

      this.showSettings = false;
    },
    getRecordById: function(id) {
      if (id <= 0) {
        return null;
      }

      var records = this.lists;
      for (var i = 0; i < records.length; i++) {
        if (records[i]._id == id) {
          return records[i];
        }
      };

      return null;
    },    
    doShowDownloadLink: function(id) {
      var record = this.getRecordById(id);
      if (null == record) {
        log.ShowError('Invalid Record Id');
        return;
      }
      this.dlLists.splice(0, this.dlLists.length);
      this.dlState.listsLoading = true;

      var query = {
        playUrl: record.playUrl
      };
      mediaServerApi.record.getItemsWithJsonQuery('recordfiles', query, function(res) {
        if (res && res.code == 0) {
          var startIndex = 1;
          this.showDownloadLink = true;
          var recordfiles = res.data.recordfiles;
          _.each(recordfiles, function(item, index, list) {
            item._id = startIndex++;
            item.downloadLink = '<a href="http://' + settings.hostname + ':6080/api/storage/file?type=AP&path=' + item.fileName + '">' + item.fileName.substr(item.fileName.lastIndexOf('/') + 1) + '</a>';
            this.dlLists.splice(this.dlLists.length, 0, item);
          }, this);
        } else {
          log.showErrorWithRes(res);
        }
      }.bind(this));
    }
  },
  ready: function() {
    var now = new Date();
    var YY = now.getFullYear();
    var MM = now.getMonth() + 1;
    if (MM < 10) MM = '0' + MM;
    var DD = now.getDate();
    if (DD < 10) DD = '0' + DD;

    this.startTime = YY + '-' + MM + '-' + DD;
    this.stopTime = YY + '-' + MM + '-' + DD;
  }
}
</script>

<style>
.my-dl-table {
  max-height: 400px;
  overflow-y: auto;  
}
</style>